<template>
  <div class="app-container">
    <el-form ref="form" :model="params" :rules="rules" label-width="100px">
      <el-row>
        <el-col :span="6">
          <el-form-item :label="tf('name')" prop="name">
            <el-input v-model.trim="params.name" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item :label="tf('code')" prop="code">
            <el-input v-model.trim="params.code" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item :label="tf('gitRepo')" prop="gitRepo">
            <el-input v-model.trim="params.gitRepo" />
          </el-form-item>
        </el-col>
        <el-col :span="5" style="text-align: center">
          <el-button type="primary" @click="search('form')">{{ $t('btn.query') }}</el-button>
          <el-button type="danger" @click="reset('form')">{{ $t('btn.reset') }}</el-button>
        </el-col>
      </el-row>
    </el-form>

    <!-- 查询结果列表 -->
    <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" style="width: 100%">
      <!--<el-table-column type="expand">
        <template slot-scope="props">
          <p class="table-expand-item">
            <span class="titel">请求路径: </span>
            <span>{{ props.row.requestUrl }}</span>
          </p>
          <p class="table-expand-item">
            <span class="titel">请求参数: </span>
            <span>{{ props.row.requestParam }}</span>
          </p>
          <p class="table-expand-item">
            <span class="titel">响应参数: </span>
            <span>{{ props.row.responseParam }}</span>
          </p>
        </template>
      </el-table-column>-->
      <el-table-column align="center" :label="tf('id')" min-width="60">
        <template slot-scope="scope">
          {{ params.pageSize * (params.pageNumber - 1) + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column :label="tf('name')" max-width="120" align="center" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column :label="tf('code')" min-width="120" align="center" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          {{ scope.row.code }}
        </template>
      </el-table-column>
      <el-table-column :label="tf('projectRoot')" min-width="120" align="center" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          {{ scope.row.projectRoot }}
        </template>
      </el-table-column>
      <el-table-column :label="tf('gitUser')" min-width="80" align="center" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span>{{ scope.row.gitUser }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="tf('gitRepo')" min-width="80" align="center" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span>{{ scope.row.gitRepo }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="tf('updateTime')" min-width="150" align="center">
        <template slot-scope="scope">
          {{ scope.row.updateTime }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('btn.operationCol')" width="270px" align="center" fixed="right">
        <template slot-scope="scope">
          <!--<el-button size="mini" style="margin-right: 2px" type="text">
            <router-link :to="'/generator/configProject?projectName=' + scope.row.code">项目配置修改</router-link>
          </el-button>-->
          <el-button size="mini" style="margin-right: 2px" type="text" @click="showAddLogModel(scope.row)">{{ tf('projectConfig') }} </el-button>
          <el-button size="mini" style="margin-right: 2px" type="text">
            <router-link :to="'./init?projectName=' + scope.row.code">{{ tf('projectInit') }}</router-link>
          </el-button>
          <el-button size="mini" style="margin-left: -1px; margin-right: 2px" type="text">
            <router-link :to="'./index?projectName=' + scope.row.code">{{ tf('viewDatasource') }}</router-link>
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="block">
      <el-pagination :total="totalCount" :page-sizes="[10, 20, 50, 100]" :page-size="params.pageSize" :current-page="params.pageNumber" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
    <el-dialog :title="tf('projectConfig')" width="50%" :close-on-click-modal="false" :visible.sync="basicDialog" @close="closeDialog">
      <el-form ref="userForm" :model="dialogForm" :rules="formRules" label-width="160px">
        <header class="header">{{ tf('gitConfig') }}</header>
        <el-row class="form_table">
          <el-col :span="24">
            <el-form-item :label="tf('gitRepo')" prop="gitRepo">
              <el-input v-model.trim="dialogForm.gitRepo" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="tf('code')">
              <el-input v-model="dialogForm.code" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="tf('projectRoot')">
              <el-input v-model="dialogForm.projectRoot" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="tf('devBranch')">
              <el-input v-model="dialogForm.devBranch" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="tf('genBranch')">
              <el-input v-model="dialogForm.genBranch" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="form_table">
          <el-col :span="12">
            <el-form-item :label="tf('gitUser')" prop="gitUser">
              <el-input v-model.trim="dialogForm.gitUser" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="tf('gitPasswd')" prop="gitPasswd">
              <el-input v-model="dialogForm.gitPasswd" />
            </el-form-item>
          </el-col>
        </el-row>
        <header class="header">{{ tf('dbConfig') }}</header>
        <el-row class="form_table">
          <el-col :span="24">
            <el-form-item :label="tf('dbConnectionUrl')" prop="dbConnectionUrl">
              <el-input v-model.trim="dialogForm.dbConnectionUrl" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="tf('dbUser')" prop="dbUser">
              <el-input v-model.trim="dialogForm.dbUser" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="tf('dbPasswd')" prop="dbPasswd">
              <el-input v-model="dialogForm.dbPasswd" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" style="text-align: center">
        <el-button type="primary" @click="confirm">{{ $t('btn.confirm') }}</el-button>
        <el-button @click="basicDialog = false">{{ $t('btn.cancel') }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { pageList, businessProject } from '@/api/generator/project'
import i18nHandler from '@/mixins/i18nHandler'
// import i18n from '@/lang'
const i18nQry = { module: 'generator', refer: 't_lc_project' }

export default {
  mixins: [i18nHandler],
  data() {
    return {
      rules: {
        requestUrl: [{ required: false, message: '请输入请求路径', trigger: 'blur' }],
        pageTitle: [{ required: false, message: '请输入页面标题', trigger: 'blur' }],
        userName: [{ required: false, message: '请输入用户名称', trigger: 'blur' }],
      },
      params: {
        pageNumber: 1,
        pageSize: 10,
        pageTitle: '',
        requestUrl: '',
        userName: '',
      },
      list: null,
      totalCount: 0,
      totalPage: 0,
      listLoading: true,
      // 项目基础配置
      basicDialog: false,
      dialogForm: {
        name: null, // 项目名称
        code: null, // 项目code
        gitUser: null,
        gitPasswd: null,
        gitRepo: null,
        devBranch: null,
        genBranch: null,
        // dbType:null,
        // dbSchema:null,
        dbConnectionUrl: null,
        dbUser: null,
        dbPasswd: null,
      },
      formRules: {
        gitRepo: [{ required: true, message: this.$t('placeholder.input'), trigger: 'blur' }],
        gitUser: [{ required: true, message: this.$t('placeholder.input'), trigger: 'blur' }],
        gitPasswd: [{ required: true, message: this.$t('placeholder.input'), trigger: 'blur' }],
        dbConnectionUrl: [{ required: true, message: this.$t('placeholder.input'), trigger: 'blur' }],
        dbUser: [{ required: true, message: this.$t('placeholder.input'), trigger: 'blur' }],
        dbPasswd: [{ required: true, message: this.$t('placeholder.input'), trigger: 'blur' }],
      },
    }
  },
  watch: {
    dialogFormVisible(val) {
      if (!val) {
        this.formData = {}
        this.$refs.dlg.$refs.form.resetFields()
      }
    },
  },
  created() {
    this.moduleI18nInit(i18nQry)
    this.queryByPage()
  },
  methods: {
    // 查询
    search(formName) {
      this.params.pageNumber = 1
      this.queryByPage()
      // this.$refs[formName].validate((valid) => {
      //   if (valid) {
      //     console.log('submit!')

      //   } else {
      //     console.log('error submit!!')
      //     return false
      //   }
      // })
    },
    // 重置
    reset(formName) {
      this.$refs[formName].resetFields()
      this.params.userName = ''
      this.params.pageTitle = ''
      this.params.requestUrl = ''
      this.params.pageNumber = 1
      this.queryByPage()
    },
    async queryByPage() {
      const res = await pageList(this.params)
      if (res.code != '200') return
      this.listLoading = true
      this.list = res.data.records
      this.totalCount = res.data.total
      this.totalPage = res.data.pages
      this.listLoading = false
    },
    handleSizeChange(val) {
      this.params.pageSize = val
      this.queryByPage()
    },
    handleCurrentChange(val) {
      this.params.pageNumber = val
      this.queryByPage()
    },
    // 关闭模态框
    closeDialog(bool) {
      bool && this.search('form') // 点确定关闭弹窗的时候才会刷新列表
      this.$refs['userForm'].resetFields()
      this.basicDialog = false
    },
    // 打开模态框
    showAddLogModel(val) {
      this.basicDialog = true
      this.dialogForm = val
      this.dialogForm.name = val.name
      this.dialogForm.code = val.code
    },
    // 提交按钮
    confirm() {
      this.$refs.userForm.validate(async(valid, obj) => {
        if (valid) {
          const { code } = await businessProject(this.dialogForm)
          if (code != '200') return
          this.closeDialog(true)
        } else {
          return
        }
      })
    },
  },
}
</script>
<style scoped lang="scss">
.header {
  line-height: 40px;
  font-weight: bold;
  text-indent: 3rem;
  background: #f9fcff;
  margin-bottom: 5px;
}
</style>
